<template>
    <div class="app-container">
      <div id="app">
        <div class="super-box">
          <div class="xchat-left">
            <div class="xtop">
              <img class="xlogo" src="@/assets/chat/002.jpg" />
              <p class="xsname"><b>用户列表</b></p>
            </div>
            <div
              v-for="user in userList"
              :key="user.uuid"
              class="chat-user"
              :class="{ selected: user.uuid === toUser }"
              @click="selectUser(user)"
            >
              <p class="xsname">
                <b :uuid="user.uuid">{{ user.nickname }}</b>
              </p>
            </div>
          </div>
          <div class="xchat">
            <div class="xtop">
              <img class="xlogo" src="@/assets/chat/001.jpg" />
              <p class="xsname">客服端</p>
            </div>
            <div class="xmid">
              <div
                v-for="(msg, index) in messages"
                :key="index"
                class="xmsg"
                :class="msg.senderClass"
              >
                <div class="xfrom">{{ msg.fromName }} {{ msg.time }}</div>
                <p class="xmessage" v-html="msg.content"></p>
              </div>
            </div>
            <div class="xbottom">
              <textarea
                class="xsendmsg"
                v-model="messageContent"
                placeholder="请输入"
              ></textarea>
              <div class="xgsend">
                <button class="xsend" @click="send">发送</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { getToken } from "@/utils/auth";
  export default {
    name: "Service",
    data() {
      return {
        BASE_URL: "ws://127.0.0.1:8080/chat",
        websocket: null,
        uuid: "888888888888888888888", // 客服 UUID
        fromName: "客服", // 客服名称
        toUser: null, // 当前选中的用户 UUID
        userInfo: { uuid: null, nickname: null, ip: null },
        userList: [], // 用户列表
        messages: [], // 消息列表
        messageContent: "", // 待发送的消息内容
      };
    },
    created() {},
    methods: {
      connectServer() {
       
      },
      onOpen() {
        console.log("连接成功");
      },
      onMessage(event) {
        
      },
      onError() {
        console.log("连接错误");
      },
      onClose() {
        console.log("连接关闭");
      },
      selectUser(user) {
        this.toUser = user.uuid;
        this.userInfo = user;
        // 加载与该用户的历史消息
      },
      send() {
        
      },
      dateTime2str(dateTime, format) {
        let z = {
          y: dateTime.getFullYear(),
          M: dateTime.getMonth() + 1,
          d: dateTime.getDate(),
          h: dateTime.getHours(),
          m: dateTime.getMinutes(),
          s: dateTime.getSeconds(),
        };
        return format.replace(/(y+|M+|d+|h+|m+|s+)/g, (v) => {
          return ((v.length > 1 ? "0" : "") + z[v.slice(-1)]).slice(-2);
        });
      },
    },
    mounted() {
      this.connectServer();
    },
  };
  </script>
  
  
  <style scoped>
  .super-box {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 78vh;
    background: rgb(252, 252, 252);
    box-shadow: rgb(0 0 0 / 16%) 0px 5px 40px;
    overflow: hidden;
  }
  .xchat-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgb(252, 252, 252);
    border-right: 1px solid #eee;
  }
  .xchat {
    flex: 3;
    display: flex;
    flex-direction: column;
    background: rgb(252, 252, 252);
  }
  .xtop {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    background: #409EFF;
    box-sizing: border-box;
    padding: 10px;
  }
  .xlogo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .xsname {
    margin-left: 10px;
    font-size: 16px;
    color: white;
  }
  .xmid {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    overflow-y: auto;
  }
  .xmsg {
    max-width: calc(100% - 50px);
    height: auto;
    width: 100%;
    overflow: hidden;
    margin: 0 0 10px 0;
  }
  .xmsg > div {
    overflow: hidden;
  }
  .xfrom {
    width: 100%;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    color: rgb(178, 178, 178);
    margin: 0 0 3px 0;
  }
  .xmessage {
    display: inline-block;
    height: auto;
    border: 1px solid lightgray;
    border-radius: 3px;
    padding: 10px;
    box-sizing: border-box;
    font-size: 13px;
    text-align: justify !important;
    line-height: 22px;
  }
  .xa > .xmessage {
    color: #333;
    background: white;
  }
  .xa {
    float: left;
    overflow-x: auto;
  }
  .xb {
    float: right;
    text-align: right;
  }
  .xb > p {
    text-align: right;
  }
  .xb > .xmessage {
    color: white;
    background: #409EFF;
  }
  .xbottom {
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    border-top: 1px solid #eee;
  }
  .xsendmsg {
    width: 100%;
    height: 58px;
    box-sizing: border-box;
    outline: none;
    resize: none;
    padding: 10px;
    border: none;
    background: rgb(252, 252, 252);
    font-size: 13px;
    font-family: auto;
    color: #333;
  }
  .xgsend {
    width: 100%;
    height: 40px;
    background-color: transparent;
    box-sizing: border-box;
    padding: 4px 10px;
  }
  .xsend {
    float: right;
    width: 60px;
    height: 32px;
    line-height: 32px;
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    opacity: 1;
    color: white;
    border-width: 0px;
    outline: none;
    border-radius: 3px;
    text-decoration: none;
    background: #409EFF;
  }
  .startchat {
    width: 62px;
    height: 62px;
    border: none;
    display: none;
    border-radius: 50%;
    background: #409EFF;
    outline: none;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 14px;
  }
  .startchaticon {
    width: 24px;
    transform: translateY(2px);
  }
  .chat-user {
    background-color: white;
  }
  .chat-user > .xsname {
    color: #333;
  }
  .chat-user.selected {
    background-color: #c0c0c0;
  }
  .element-style-f {
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    background-color: #009bee;
    line-height: 37px;
    text-align: center;
    font-weight: bold;
    color: white;
  }
  .element-style-t {
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    background-color: #409EFF;
    line-height: 37px;
    text-align: center;
    font-weight: bold;
    color: white;
  }
  .outline-user {
    color: gray;
    border-color: lightgray !important;
  }
  .rec-time {
    text-align: center;
    color: #727272;
    font-size: 12px;
  }
  .rec-chat-text-s {
    text-align: right;
  }
  .rec-chat-text-u {
    text-align: left;
  }
  .rec-chat-text-s > span {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    outline: none;
    resize: none;
    padding: 3px 8px 0px;
    border: none;
    background-color: #409EFF;
    font-size: 16px;
    font-family: auto;
    color: #333;
    border-radius: 3px;
  }
  .rec-chat-text-u > span {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    outline: none;
    resize: none;
    padding: 3px 8px 0px;
    border: none;
    background-color: #409EFF;
    font-size: 16px;
    font-family: auto;
    color: #333;
    border-radius: 3px;
  }
  </style>